<template>
    <div id="auth">
        <div class="wrapper" v-if='pageLoaded'>
            <p class='header'>通过以下认证后，最快10分钟完成放款</p>
            <ul class="auth-list">
                <li class="auth-item" @click='goRouter(item),log("c_verify_i",item.name)' v-for='item in list'>
                    <span class='icon'><img :src="item.icon | url"></span>
                    <div class='intro'>
                        <p>{{item.name || placeholder}}</p>
                        <span>{{item.info || placeholder}}</span>
                    </div>
                    <div class='status' :class='{success:item.status == 40}'>
                        <img width='16' v-if='item.status == 40' src="../images/sub_done@3x.png">{{item.statusStr}}
                    </div>
                    <i class='iconfont icon-arrow'></i>
                </li>
            </ul>
            <div class="button transparent" @click='goIndex'>回到首页</div>
        </div>
       <!--  <modal
           class='modal-success'
           :closeButton='true'
           :maskClose='false'
           @close='show_modal_success = false'
           :show='show_modal_success'>
           <img src="../images/img_done@3x.png" width="96">
           <p>认证完成</p>
           <span>恭喜! 您已完成所有认证<br>现在可以下单回收手机啦!</span>
           <div class="button" @click='goApply'>立即下单</div>
       </modal> -->
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import toggle from '../components/Toggle.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import url from '../filters/filter-url'
    import mixinReport from '../mixins/mixin-report'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, reportApi, userApi, authApi } from '../api/api'
    import { getQueryString } from '../utils/utils'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,tabBox,
            tab,
            toggle
        },
        filters:{
            dateFormat,
            url
        },
        data() {
            return {
                placeholder:'--',
                pageLoaded:false,
                newest:{},
                list:[],
                status:[],
                show_modal_success:false,
                show_modal_gopay:false,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo || {}
            },
            configInfo(){
                return this.localInfo.configInfo || {}
            },
            authId(){
                let boolean = true
                _.each(this.list,(value,index)=>{
                    if(value.code == 'identity'){
                        if(value.status != 40){
                            boolean = false
                        }
                        return false
                    }
                    
                })
                return boolean
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setGoHome'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function
            log(eventName,eventLabel){
                let eventParams = {}
                if(eventLabel){
                    eventParams = {
                        e_n:eventName,
                        e_v:{
                            value:eventLabel
                        }
                    }
                }
                else{
                    eventParams = {
                        e_n:eventName
                    }
                }
                allApi.log(eventParams)
            },
            goRouter(item){
                let code = item.code
                if(code != 'identity'){
                    if(!this.authId){
                        this.setMsgTip({
                            text:'请先完成身份认证',
                            type:'warn'
                        })
                        return
                    }
                }

                let status = item.status
                let name
                if(status === 30 || status === 40){
                    this.setMsgTip({
                        text:'认证审核中，禁止修改信息',
                        type:'warn'
                    })
                    return
                }

                if(code == 'identity') name = 'auth-id'
                if(code == 'personal') name = 'info-base'
                if(code == 'zhima') {
                    if(this.configInfo.zmAutoAuth){
                        this.$router.replace({
                            name:'auth-zmxy',
                        })
                        return
                    }
                    this.showLoading()
                    authApi.zhimaAuthUrl({
                        callBackUrl:location.href
                    })
                    .then(result=>{
                        this.hideLoading()
                        location.href = result
                    })
                    .catch(error => {
                        console.error(error)
                        this.hideLoading()
                    })
                    return
                }
                if(code == 'mobile') {
                    this.showLoading()
                    reportApi.carrier51gjj({
                        returnUrl:location.href
                    })
                    .then(result=>{
                        this.hideLoading()
                        location.href = result.url
                    })
                    .catch(error => {
                        console.error(error)
                        this.hideLoading()
                    })
                    return
                }
                if(code == 'bankcard') name = 'add-bankcard'

                this.$router.push({
                    name:name,
                })
            },
            replaceStr(str){
                return str.replace(/([&?])nextItem=[^&]*(&)?/g, function(p0, p1, p2) {
                    console.log(p0)
                    console.log(p1)
                    console.log(p2)
                    return p1 === '?' || p2 ? p1 : '';
                });
            },
            goIndex(){
                this.$router.push({
                    name:'index',
                })
            },
            goApply(){
                this.$router.push({
                    name:'apply',
                })
            },
            goUserInfo(){
                if(this.newest.needRepay){
                    this.show_modal_gopay = true
                    return
                }

                this.$router.push({
                    name:'user-credit-report-user-info',
                    params:{
                        no:this.newest.creditReportNo
                    }
                })
            },

            goZmxy(){
                if(this.newest.needRepay){
                    this.show_modal_gopay = true
                    return
                }

                if(this.reportInfo.USER_INFO.state == 'SUCCESS'){
                    this.$router.push({
                        name:'user-credit-report-zmxy',
                        params:{
                            no:this.newest.creditReportNo
                        }
                    })
                }
                else{
                    this.setMsgTip({
                        text:'请按顺序完成信用认证',
                        type:'warn'
                    })
                    this.$router.push({
                        name:'user-credit-report-user-info',
                        params:{
                            no:this.newest.creditReportNo
                        }
                    })
                }
            },
            checkAuth(){
                let pass = true
                _.each(this.list,(value,index)=>{
                    if(value.status != 40){
                        pass = false
                        return false
                    }
                })
                if(pass){
                    this.show_modal_success = true
                }
            },
            getList(){
                this.showLoading()
                let goFirst = false
                authApi.authItemList()
                .then(result=>{
                    this.list = result
                    _.each(this.list,(value,index)=>{
                        if(value.code == 'identity' && value.status === 0){
                            goFirst = true
                            this.hideLoading()
                           /* this.$router.replace({
                                name:'auth-id'
                            })*/
                            return false
                        }
                    })
                    if(goFirst) return

                    this.checkAuth()
                    this.pageLoaded = true
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                    this.pageLoaded = true
                })
            },
            getStatus(){
                return authApi.authItemStatus()
                .then(result=>{
                    this.status = result
                })
            },
        },
        created(){
            let nextItem = this.$route.query.nextItem
            if(nextItem){
                let link = this.replaceStr(location.href)
                history.replaceState({page:'reload'},null,link)

                this.goRouter({
                    code:nextItem
                })
            }
            this.getList()

        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #auth{
        .wrapper{
            .button{
                margin-top: 20px;
            }
        }
        .header{
            @extend %font-caption;
            padding-top: 16px;
            text-align: center;
            padding-bottom: 8px;
        }
        .auth-item{
            padding: 14px 8px 14px 16px;
            display: flex;
            align-items: center;
            background-color: #fff;
            margin: 8px;
            border-radius: 2px;
            transition:background ease 300ms;
            &:active{
                background-color: darken(#fff,10%);
            }
            .icon{
                display: flex;
                width: 24px;
                height: 24px;
                align-items: center;
                img{
                    display: block;
                    width: 100%;
                }
            }
            .intro{
                flex:1;
                padding-left: 16px;
                p{
                    @extend %font-title;
                    color:$importColor;
                }
                span{
                    @extend %font-caption;
                }
            }
            .status{
                padding-right: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    display: block;
                    padding-right: 4px;
                }
                &.success{
                    color:$themeColor;
                }
            }
        }
        .modal-success{
            text-align: center;
            p{
                padding-top: 8px;
                @extend %font-title;
                color:$importColor;
            }
            span{
                padding-top: 16px;
                display: block;
                @extend %font-body1;
            }
            .button{
                margin-top: 30px;
            }
        }
    }

</style>
